<!--
 * @Description: 客服组件
-->
<template>
  <div class="agent-component">
    <el-button 
      class="agent-btn" 
      type="primary" 
      circle 
      @click="showAgent = true"
    >
      <el-icon>
        <Service />
      </el-icon>
    </el-button>
    
    <el-dialog v-model="showAgent" title="客服中心" width="400px">
      <div class="agent-content">
        <div class="service-options">
          <div class="option-item" @click="handleCall">
            <el-icon class="option-icon">
              <Phone />
            </el-icon>
            <span>电话咨询</span>
          </div>
          
          <div class="option-item" @click="handleOnlineChat">
            <el-icon class="option-icon">
              <ChatDotRound />
            </el-icon>
            <span>在线客服</span>
          </div>
          
          <div v-if="hasAudioLuyan === 'Y'" class="option-item" @click="handleAudioService">
            <el-icon class="option-icon">
              <Microphone />
            </el-icon>
            <span>语音服务</span>
          </div>
          
          <div v-if="hasReservationLuyan === 'Y'" class="option-item" @click="handleReservation">
            <el-icon class="option-icon">
              <Calendar />
            </el-icon>
            <span>预约服务</span>
          </div>
        </div>
        
        <div class="contact-info">
          <p>客服热线：400-123-4567</p>
          <p>服务时间：周一至周五 9:00-18:00</p>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="showAgent = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElButton, ElDialog, ElIcon, ElMessage } from 'element-plus'
import { Service, Phone, ChatDotRound, Microphone, Calendar } from '@element-plus/icons-vue'

interface Props {
  hasAudioLuyan: string
  hasReservationLuyan: string
}

const props = defineProps<Props>()

const showAgent = ref(false)

const handleCall = () => {
  ElMessage.info('正在为您转接电话客服...')
  showAgent.value = false
}

const handleOnlineChat = () => {
  ElMessage.info('正在为您打开在线客服...')
  showAgent.value = false
}

const handleAudioService = () => {
  ElMessage.info('正在为您开启语音服务...')
  showAgent.value = false
}

const handleReservation = () => {
  ElMessage.info('正在为您打开预约服务...')
  showAgent.value = false
}
</script>

<style scoped lang="less">
.agent-component {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 1000;
  
  .agent-btn {
    width: 56px;
    height: 56px;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    
    &:hover {
      transform: scale(1.1);
      transition: transform 0.3s ease;
    }
  }
}

.agent-content {
  .service-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
    
    .option-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      border: 1px solid #ebeef5;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: #409eff;
        background-color: #f0f9ff;
      }
      
      .option-icon {
        font-size: 24px;
        color: #409eff;
        margin-bottom: 8px;
      }
      
      span {
        font-size: 14px;
        color: #333;
      }
    }
  }
  
  .contact-info {
    text-align: center;
    color: #666;
    font-size: 12px;
    
    p {
      margin: 4px 0;
    }
  }
}

@media (max-width: 768px) {
  .agent-component {
    bottom: 60px;
    right: 16px;
    
    .agent-btn {
      width: 48px;
      height: 48px;
    }
  }
  
  .agent-content {
    .service-options {
      grid-template-columns: 1fr;
      
      .option-item {
        padding: 16px;
        
        .option-icon {
          font-size: 20px;
        }
        
        span {
          font-size: 13px;
        }
      }
    }
  }
}
</style>
